<template>
    <CompareLayout 
        ref="comparelayout"
        @sortChange="generateCompareData">


        <div class="layout__query" v-for="(item, index) in querylist" :key="item.id" :slot="index" :slotIndex="index">
            <div class="query-view">
                {{ item.name }}
            </div>
            <div class="query-control">
                <el-button type="primary" @click="handleGetCurrentResult(item, index)">获取模拟数据</el-button>
            </div>
        </div>


    </CompareLayout>
</template>
<script>
    import CompareLayout from './components/CompareLayout.vue'
    import { mockStringSetting, defaultStringResult } from './setting/locktest'

    export default {
        name: 'CompareIdentify',
        components: { CompareLayout },
        props: {},
        data() {
            return {
                querylist: [
                    { id: '1d2sa1das', name: '第一个对象', parmas: {}, response: {} },
                    { id: '4qw5e465q', name: '第二个对象', parmas: {}, response: {} },
                    { id: 'c46s5d4ss', name: '第三个对象', parmas: {}, response: {} },
                    { id: 'by4t65h45', name: '第四个对象', parmas: {}, response: {} },
                ]
            }
        },
        computed: {

        },
        methods: {
            readyCompareSetting(mockStringSetting, number) {
                if(!Array.isArray(mockStringSetting)) {
                    this.$warning('配置列表格式错误')
                    return
                }

                if(isFinite(number) && number < 2) {
                    this.$warning('至少生成两组')
                    return
                }
                this.$refs['comparelayout'].readyDataInfoObj(mockStringSetting, number)
            },  


            handleGetCurrentResult(item, index) {
                const comapreData = defaultStringResult()
                item.response = JSON.parse(JSON.stringify(comapreData))
                this.$refs['comparelayout'].refreshCompareData(comapreData, index)
            },

            generateCompareData(index) {
                if(!index) return

                if(index === -1) {
                    this.querylist.push({
                        id: Math.floor(Math.random() * 10000),
                        name: `新增第${ this.querylist.length + 1 }个对象`,
                        parmas: {},
                        response: {}
                    })
                    return
                } else {
                    this.querylist.splice(index, 1)
                }
            },
        },
        beforeCreate() {

        },
        created() {

        },
        beforeMount() {

        },
        mounted() {
            this.readyCompareSetting(mockStringSetting, 4)
        },
        beforeDestroy() {

        },
    }
</script>
<style lang="scss" scoped>


.layout__query {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;

    // .query-view {

    // }

    // .query-control {

    // }
}
</style>